import React, { useState, useEffect } from 'react'
import { Select, Input, Button, Card, Table, Tag, Space } from "antd"
import { Link,useNavigate } from "react-router-dom"
import { findAllProduct, findByType } from "@/apis/goods"

export default function ProductList() {
  const [data, setData] = useState([
    {
      _id: "5fbfa53461d8a9055011ac20",
      name: "小米10",
      title: "至尊纪念版 双模5G 骁龙865 120HZ高刷新率 ",
      price: 299,
      type: {
        _id: "5fbccd4aea6c0000ff007f33",
        name: "数码产品",
        parentId: "0",
        type: "一级分类",
        updateDate: null
      },
      imgSrc: "3.jpg",
      msg: "商品名称：小米10至尊纪念版商品编号：100014565820商品毛重：0.8kg商品产地：中国大陆CPU型号：骁龙865运行内存：12GB机身存储：256GB存储卡：不支持存储卡摄像头数量：后置四摄后摄主摄像素：4800万像素前摄主摄像素：2000万像素主屏幕尺寸（英寸）：6.67英寸分辨率：全高清FHD+屏幕比例：19.6~20:9屏幕前摄组合：开孔屏充电器：其他热点：液冷散热，人脸识别，无线充电，快速充电，NFC，屏幕指纹，曲面屏，5G，超高屏占比，屏幕高刷新率特殊功能：超大字体，超大音量，语音识别(文字语音互转)，极简桌面模式屏占比：≥92%操作系统：Android(安卓)游戏配置：液冷散热游戏性能：发烧级充电功率：100W以上",
      createDate: "2020-11-26T12:53:08.611Z",
      updateDate: "2020-11-27T02:18:09.629Z",
      delstate: 1,
      state: 1
    }
  ])
  const [columns, setColumns] = useState([
    {
      title: '商品名字',
      dataIndex: "name"
    },
    {
      title: '商品描述',
      dataIndex: 'title',
    },
    {
      title: '商品价格',
      dataIndex: 'price',
    },
    {
      title: '商品类型',
      dataIndex: 'type',
      render: (params, params2) => {
        if (params) {
          return params.name
        } else {
          return "暂无数据"
        }
      }
    },
    {
      title: '商品状态',
      dataIndex: 'state',
      render: (params) => {
        const res = params ? <Button type="default">点击下架</Button> : <Button type="dashed">点击上架</Button>
        return res
      }
    },
    {
      title: '操作',
      render: (params) => {
        return (
          <>
            <Button>删除</Button>&nbsp;&nbsp;
            <Button onClick={()=>updateProductEvent(params)} type='dashed'>修改</Button>
          </>
        )
      }
    }
  ])
  const [searchType, setSearchType] = useState("")
  const [searchData, setSearchData] = useState("")
  //路由跳转函数
  const navigate = useNavigate()

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData = async () => {
    const res = await findAllProduct()
    console.log(res);
    setData(res.data.data)
  }

  const SearchChange = (value) => {
    console.log(value);
    setSearchType(value)
  }

  const InputChange = (e) => {
    const value = e.target.value;
    setSearchData(value)
  }

  const search = async () => {
    const res = await findByType({ searchType, searchData })
    setData(res.data.data)
  }

  const updateProductEvent = (value) => {
    const id = value._id;
    // navigate(`/home/productUpdate?id=${id}`)
    navigate(`/home/productUpdate`,{
      state:{id}
    })
    // navigate(`/home/productUpdate`)
  }

  return (
    <React.Fragment>
      {/* 搜索模块 */}
      <div style={{ height: "100px", display: "flex", alignItems: "center" }}>
        <Select
          style={{ width: "180px" }}
          allowClear={true}
          placeholder="请选择搜索内容"
          onChange={SearchChange}
          options={[
            { value: "name", label: "按照名字搜索" },
            { value: "title", label: "按照描述搜索" }
          ]}>
        </Select>
        <Input
          style={{ width: "180px", margin: "0px 20px" }}
          placeholder="请输入都是内容"
          onChange={InputChange}
        />
        <Button onClick={search} type="dashed">搜索</Button>
      </div>
      {/* 表格区域 */}
      <Card
        title="商品列表"
        extra={<Link to="/home/productAdd">添加商品</Link>}
        style={{
          width: "100%",
        }}
      >
        <Table
          dataSource={data}
          columns={columns}
          bordered={true}
          loading={false}
          rowKey="_id"
          pagination={{ defaultCurrent: 1, defaultPageSize: 5, pageSizeOptions: [5, 10, 15], showSizeChanger: true, showQuickJumper: true }}
        >

        </Table>
      </Card>
    </React.Fragment>
  )
}
